<template>
  <div>
    <div class="cartContainer" v-show="listOrNorm">
      <!-- 头部部分 -->
      <div class="m-cartHd">
        <span class="logo">购物车</span>

        <span class="cart-btn" v-if="control" @click="controlDisplay"
          >编辑</span
        >

        <span class="lingquan" v-if="control">
          <img src="./images/lingquan.png" alt="" />
        </span>

        <span class="compelte" v-if="!control" @click="controlDisplay"
          >完成</span
        >
      </div>

      <!-- 服务政策 -->
      <div class="service">
        <!-- <ul class="policy">
        <li class="item">
          <span class="circle">◦</span>
          <span>30天无忧退货</span>
        </li>
        <li class="item">
          <span class="circle">◦</span>
          <span>48小时快速退款</span>
        </li>
        <li class="item">
          <span class="circle">◦</span>
          <span>满99元免邮费</span>
        </li>
      </ul> -->
        <div class="notice">自营仓商品,已满99元免邮</div>
      </div>

      <div class="cartContainer">
        <!-- 空购物车 -->

        <div class="item">
          <a class="header" href="##">
            <span>全场换购</span>
            <div>再逛逛></div>
            <p>已满足49元享超值换购</p>
          </a>
          <a href="" class="huangou"> 去换购商品 <i> > </i> </a>
        </div>

        <div class="no-cart" v-if="!cartList.length">
          <div class="img">
            <div class="tit">去添加点什么吧</div>
          </div>
        </div>

        <ul class="cartGroup" v-for="(cart, index) in cartList" :key="index">
          <li
            class="itemCart"
            v-for="cartInfo in cart.cartInfoList"
            :key="cartInfo.id"
          >
            <input
              class="singal"
              type="checkbox"
              name="chk_list"
              :checked="cartInfo.isChecked"
              @click="handleCheck(cartInfo)"
            />

            <div class="hcard">
              <span class="c1">特价抢购中</span>
              <span class="c2">距优惠结束</span>
              <span class="c3">76天9小时</span>
            </div>

            <div class="body">
              <div class="imgContainer" @click="toDetail">
                <img :src="cartInfo.imgUrl" />
              </div>
              <div class="line1">
                <div>
                  特价
                  <span class="text">{{
                    cartInfo ? cartInfo.skuName : "苹果手机"
                  }}</span>
                </div>
              </div>
              <div class="line2">
                <span @click="isCart">黑色∨</span>
              </div>

              <div class="line3">
                <div class="price">
                  {{ cartInfo ? cartInfo.skuPrice : "8499" }}
                </div>
                <div class="originPrice">¥219</div>
              </div>

              <div class="addMus">
                <a href="javascript:void(0)" class="mins">－</a>
                <input
                  autocomplete="off"
                  type="text"
                  value="1"
                  minnum="1"
                  class="itxt"
                />
                <a href="javascript:void(0)" class="plus">＋</a>
              </div>

              <div class="warehouseInfo">
                <van-icon name="wap-home-o" />
                <span>自营仓商品满99免邮</span>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <van-submit-bar button-text="下单" @submit="onSubmit" v-if="control">
        <input
          class="chooseAll"
          type="checkbox"
          :checked="isAll"
          @click="handleCheckAll"
        />
        <span class="s3">总数:{{total}}</span>
        <span class="s1">{{ totalPrice }}</span>
      </van-submit-bar>

      <van-submit-bar
        button-text="删除"
        @submit="handleDeleteChecked"
        v-if="!control"
      >
        <input
          class="chooseAll"
          type="checkbox"
          :checked="isAll"
          @click="handleCheckAll"
        />
        <span class="s4">总数:{{total}}</span>
        <span class="s2">{{ totalPrice }}</span>
      </van-submit-bar>
    </div>

    <!-- 规格页面 -->
    <div class="normContainer" v-show="!listOrNorm">
      <!-- 商品信息 -->
      <div class="infoContainer">
        <div class="imgContainer">
          <img src="./images/good1.webp" alt="" />
        </div>
        <div class="con">
          <span>价格：¥0</span>
          <p>已选择: 30ml*2x1</p>
        </div>
      </div>

      <!-- 商品规格信息 -->
      <div class="format">
        <div class="tt">规格</div>
        <div class="con">
          <div class="tab-sel">
            <span class="tab-txt">30ml*2</span>
          </div>
        </div>
      </div>

      <div class="format">
        <div class="tt">数量</div>
        <div class="addMus">
          <a href="javascript:void(0)" class="mins">－</a>
          <input
            autocomplete="off"
            type="text"
            value="1"
            minnum="1"
            class="itxt"
          />

          <a href="javascript:void(0)" class="plus">＋</a>
        </div>
      </div>

      <div class="btns">
        <div class="button1" @click="isCart">返回</div>
        <div class="button2">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  reqCartList,
  reqCheckSkuInCart,
  reqCheckAllSkuInCart,
  reqDeleteSkuInCart,
  reqBatchDeleteSkuInCart,
  reqAddOrUpdateCart,
} from "@/api";

export default {
  data() {
    return {
      listOrNorm: true,
      cartList: [],
      control: true,
    };
  },
  methods: {
    isCart() {
      this.listOrNorm = !this.listOrNorm;
    },

    async handleCheck(cartInfo) {
      //获取当前操作商品的skuId、isChecked
      let { skuId, isChecked } = cartInfo;
      //维护一个新的勾选值
      isChecked = isChecked ? 0 : 1;
      //如果想让页面丝滑，加上下面这句话，啥意思捏？—— 先把前端自己的数据维护好，随后再磨磨唧唧发请求
      //cartInfo.isChecked = isChecked
      //发请求
      let result = await reqCheckSkuInCart(skuId, isChecked);
      //若勾选不成功，提示一下因为啥
      if (result.code !== 200) alert(result.message);
      //刷数据
      this.getCartList();
    },
    toDetail() {
      this.$router.push({ path: "/detail" });
    },

    async getCartList() {
      let result = await reqCartList();

      localStorage.setItem("cartLength", JSON.stringify(result.data.length));

      if (result.code !== 200) alert(result.message);
      else this.cartList = result.data;
    },

    async handleCheckAll() {
      //维护好一个isChecked
      let isChecked = this.isAll ? 0 : 1;
      //收集好购物车中所有商品的skuId，形成一个数组
      let skuIdList = [];
      //遍历购物车列表，收集skuId
      this.cartList.forEach((shopCart) => {
        shopCart.cartInfoList.forEach((cartInfo) => {
          //如果想让页面丝滑，加上下面这句话，啥意思捏？—— 先把前端数据维护好，随后再磨磨唧唧发请求
          //cartInfo.isChecked = isChecked
          skuIdList.push(cartInfo.skuId);
        });
      });
      //发请求
      let result = await reqCheckAllSkuInCart(skuIdList, isChecked);
      //若全选不成功，提示一下因为啥
      if (result.code !== 200) alert(result.message);
      //刷数据
      this.getCartList();
    },

    //删除某个商品
    async handleDelete(id) {
      if (confirm("确定删除？")) {
        //发送请求去删除
        let result = await reqDeleteSkuInCart(id);
        //若勾选不成功，提示一下因为啥
        if (result.code !== 200) alert(result.message);
        //刷数据
        this.getCartList();
      }
    },
    //删除已勾选
    async handleDeleteChecked() {
      if (confirm("确定删除所有已勾选？")) {
        //准备容器，收集所有选中的skuIdList
        let skuIdList = [];
        this.cartList.forEach((shopCart) => {
          shopCart.cartInfoList.forEach((cartInfo) => {
            if (cartInfo.isChecked) skuIdList.push(cartInfo.skuId);
          });
        });
        //请求删除多个
        let result = await reqBatchDeleteSkuInCart(skuIdList);
        //若删除不成功，提示一下因为啥
        if (result.code !== 200) alert(result.message);
        //刷数据
        this.getCartList();
      }
    },

    controlDisplay() {
      this.control = !this.control;
    },
    onSubmit() {
      this.$router.push({ path: "/Order" });
    },
    onClickEditAddress() {},
  },

  computed: {
    isAll() {
      return this.cartList.every((shopCart) => {
        return shopCart.cartInfoList.every((cartInfo) => {
          return cartInfo.isChecked === 1;
        });
      });
    },

    total() {
      let n = 0;
      this.cartList.forEach((shopCart) => {
        shopCart.cartInfoList.forEach((cartInfo) => {
          if (cartInfo.isChecked) n += cartInfo.skuNum;
        });
      });

     
      return n;
    },
    //总金额
    totalPrice() {
      let n = 0;
      this.cartList.forEach((shopCart) => {
        shopCart.cartInfoList.forEach((cartInfo) => {
          if (cartInfo.isChecked) n += cartInfo.skuNum * cartInfo.skuPrice;
        });
      });
      return n;
    },
  },
  mounted() {
    this.getCartList();
  },
};
</script>

<style lang="less" scoped>
.cartContainer {
  background-color: rgb(244, 244, 244);
  height: 1000px;
  // 头部部分
  .m-cartHd {
    width: 375px;
    height: 44px;
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(204, 202, 202);
    position: relative;
    span {
      line-height: 44px;
    }
    .compelte {
      position: absolute;
      top: 0;
      right: 10px;
      font-size: 18px;
    }
    .logo {
      font-size: 18px;
      padding-left: 18px;
    }
    .lingquan {
      float: right;
      margin: 0 20px;
      img {
        width: 36px;
        height: 19px;
      }
    }
    .cart-btn {
      float: right;
      font-size: 16px;
      margin-right: 16px;
    }
  }

  //服务政策
  .service {
    .policy {
      display: flex;
      height: 35px;
      background-color: rgb(238, 238, 238);
      justify-content: space-around;
      .item {
        span {
          font-size: 12px;
          color: rgb(115, 117, 115);
        }
      }
    }

    .notice {
      padding: 0 0.5rem;
      line-height: 1rem;
      font-size: 0.4rem;
      color: #f48f18;
      background-color: #fff8d8;
    }
  }

  .item {
    background-color: rgb(255, 255, 255);
    height: 73px;
    .header {
      display: block;
      position: relative;
      span {
        background-color: #fc865f;
        background-image: linear-gradient(-225deg, #fc865f 0, #fc625f 100%);
        border-radius: 0.04rem;
        padding: 0 0.1rem;
        line-height: 0.32rem;
        font-size: 0.35rem;
        text-align: center;
        color: #fff;
        margin: 0 0.16rem 0 0.3rem;
        white-space: nowrap;
      }
      p {
        font-size: 0.4rem;
        line-height: 0.4rem;
        color: #333;
        top: -5px;
        left: 80px;
        position: absolute;
        width: 219px;
        height: 20px;
      }
      div {
        flex-shrink: 0;
        margin-left: 0.3rem;
        color: #dd1a21;
        font-size: 0.36rem;
        line-height: 0.36rem;
        position: absolute;
        top: 10px;
        left: 305px;
      }
    }

    .huangou {
      display: block;
      margin: 0 0.3rem 0.1rem 0.86rem;
      padding: 0 0.2rem;
      font-size: 0.4rem;
      color: rgb(0, 0, 0);
      line-height: 0.56rem;
      background-image: linear-gradient(
        -225deg,
        rgba(252, 134, 95, 0.05),
        rgba(252, 98, 95, 0.05) 100%
      );
      height: 28px;
      line-height: 28px;
      border-radius: 0.04rem;
      margin-top: 14px;
      i {
        float: right;
      }
    }
  }

  //购物车板块
  .cartContainer {
    .cartGroup {
      .itemCart {
        margin-top: 10px;
        width: 375px;
        height: 161px;
        background: rgb(255, 255, 255);
        position: relative;
        .singal {
          position: absolute;
          top: 70px;
          left: 15px;
          // background-color: rgb(238, 10, 36);
        }
        .hcard {
          margin-left: 40px;
          .c1 {
            border: 0.01rem solid #f48f18;
            border-radius: 0.04rem;
            font-size: 0.2rem;
            color: #f48f18;
            line-height: 0.3rem;
            padding: 0 0.08rem;
            font-family: PingFangSC-Regular;
          }
          .c2 {
            margin: 0 0.1rem 0 0.12rem;
            font-size: 0.22rem;
          }
          .c3 {
            font-size: 0.22rem;
            font-weight: bold;
          }
        }

        .body {
          width: 332px;
          height: 110px;
          position: relative;

          margin: 10px 0 0 43px;
          .imgContainer {
            float: left;
            overflow: hidden;
            background-color: #eee;
            width: 2.6rem;
            height: 2.6rem;
            border-radius: 4px;
            img {
              display: block;
              width: 2.6rem;
              height: 2.6rem;
            }
          }

          .line1 {
            padding: 0 10px;
            width: 210px;
            height: 36px;
            margin-left: 100px;
            div {
              color: #f48f18;
              font-size: 16px;
              .text {
                color: rgb(0, 0, 0) !important;
                font-size: 10px;
              }
            }
          }

          .line2 {
            padding: 0 0.1rem;
            color: #7f7f7f;
            background: #fafafa;
            border: 0.01rem solid #efefef;
            border-radius: 0.02rem;
            display: inline-block;
            margin-top: 0.1rem;
            font-size: 0.24rem;
            line-height: 0.36rem;
            position: absolute;
            left: 220px;
            top: 95px;
            span {
              display: inline-block;
              max-width: 3.26rem;
              color: #7f7f7f;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }

          .line3 {
            width: 133px;
            height: 21px;
            font-size: 4px;
            position: absolute;
            left: 110px;
            top: 80px;
            div {
              float: left;
              font-size: 16px;
            }
            .originPrice {
              text-decoration: line-through;
              font-size: 12px;
              position: absolute;
              left: 40px;
              top: 4px;
              color: rgb(154, 154, 154);
            }
          }

          .addMus {
            position: absolute;
            left: 220px;
            top: 60px;
            font-size: 12px;
            a {
              border: 1px solid rgb(149, 147, 148);
              color: rgb(149, 147, 148);
              width: 26px;
              text-align: center;
              padding: 2px;
              height: 22px;
            }
            .mins {
              border-right: 0;
              float: left;
              border-top-left-radius: 3px;
              border-bottom-left-radius: 3px;
            }
            input {
              border: 1px solid rgb(149, 147, 148);
              width: 29px;
              padding: 2px;
              height: 22px;
              float: left;
              text-align: center;
              font-size: 10px;
            }
            .plus {
              border-left: 0;
              float: left;
              border-top-right-radius: 3px;
              border-bottom-right-radius: 3px;
            }
          }

          .warehouseInfo {
            position: absolute;
            top: 90px;
            .van-icon {
              background: rgb(119, 164, 231);
              font-size: 2px;
            }
            span {
              margin-left: 5px;
              color: rgb(127, 127, 127);
              font-size: 8px;
            }
          }

          .van-checkbox {
            position: absolute;
            left: -32px;
            top: 40px;
          }
        }
      }
    }

    .no-cart {
      margin-top: 180px;
      display: flex;
      justify-content: center;
      .img {
        background-image: url(./images/cart.webp);
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        background-position: center center;
        background-repeat: no-repeat;
        width: 3.4rem;
        height: 3.4rem;
        margin-bottom: 0.1rem;
        background-size: 3.4rem 3.4rem;
        position: relative;
        .tit {
          color: rgb(127, 127, 127);
          font-size: 15px;
          position: absolute;
          top: 130px;
          left: 10px;
        }
      }
    }
  }

  //提交订单
  .van-submit-bar {
    margin-bottom: 50px;
    border-bottom: 1px solid rgb(244, 244, 244);
    .s1 {
      width: 70px;
      color: rgb(221, 30, 37);
      font-size: 20px;
    }
   
    .s2 {
      color: rgb(255, 255, 255);
      width: 70px;
    }
    .s3{
      margin-right:100px;
      width:40px;
    }
    .s4{
      margin-right:100px;
      width:40px;
       color: rgb(255, 255, 255);
    }
  }
}

.normContainer {
  width: 100%;
  height: 650px;
  background-color: rgb(255, 255, 255);
  font-size: 14px;
  .infoContainer {
    width: 345px;
    height: 99px;
    position: relative;
    margin: 15px;
    .imgContainer {
      float: left;
      overflow: hidden;
      background-color: #eee;
      width: 2.6rem;
      height: 2.6rem;
      border-radius: 4px;
      img {
        display: block;
        width: 2.6rem;
        height: 2.6rem;
      }
    }

    .con {
      span {
        color: red;
        font-size: 14px;
        position: relative;
        left: 10px;
        top: 55px;
      }
      p {
        font-size: 14px;
        color: rgb(51, 51, 51);
        position: relative;
        top: 45px;
        left: 10px;
      }
    }
  }

  .format {
    width: 345px;
    height: 82px;
    margin: 15px;

    .tab-sel {
      position: relative;
      vertical-align: middle;
      border-radius: 4px;
      padding: 0 0.24rem;
      font-size: 0.28rem;
      line-height: 0.72rem;
      height: 0.72rem;
      margin-right: 0.3rem;
      margin-bottom: 0.2rem;
      overflow: hidden;
      border: 2px solid #dd1a21;
      color: #dd1a21;
      font-size: 16px;
      width: 50px;
      top: 10px;
    }
    .addMus {
      position: relative;
      top: 5px;
      font-size: 12px;
      a {
        border: 1px solid rgb(149, 147, 148);
        color: rgb(149, 147, 148);
        width: 26px;
        text-align: center;
        padding: 2px;
        height: 22px;
      }
      .mins {
        border-right: 0;
        float: left;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
      }
      input {
        border: 1px solid rgb(149, 147, 148);
        width: 29px;
        padding: 2px;
        height: 22px;
        float: left;
        text-align: center;
        font-size: 10px;
      }
      .plus {
        border-left: 0;
        float: left;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
      }
    }
  }

  .btns {
    background: rgb(255, 255, 255);
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 48px;
    line-height: 48px;
    bottom: 0;
    display: flex;
    text-align: center;
    border-top: 1px solid rgb(199, 199, 199);
    .button1 {
      width: 78px;
    }
    .button2 {
      width: 297px;
      background: rgb(221, 26, 33);

      color: rgb(255, 255, 255);
    }
  }
}
</style>